import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Modal,
    List,
    Button,

} from 'antd-mobile';
import { sto_detail,storeDetail} from './storesDetail.less';
import MyListView from '../../components/MyListView/MyListView';
import { connect } from 'dva';
import {routerRedux} from "dva/router";
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import erweima from '../../assets/img/erweima.svg';
import storeTel from '../../assets/svg/storeTel.svg';
import {Toast} from "antd-mobile/lib/index";
import {sto_discount,sto_square,sto_list,sto_lists} from "./storesDetail.less";
import {evalute_madel} from "../goodsDetail/goodsCarousel.less";


class StoresDetail extends Component {
    constructor(props){
        super(props);
        this.state={
            id:this.props.match.params.id,
            layoutType:true,
            open:false,
            concernModel:false,
            visible:false,
            visible1:false

        }
        this.AlloyTouch = null;
    }



    componentDidMount(){
        this.props.dispatch({ type: 'storesShow/getstoresEFF', obj:{ id:this.props.match.params.id }})

    }
    // erweima=(aa)=>{
    //     Toast.info(<img src={aa} alt=""/>);
    // }
    handlePayModel = (vName, vValue) => {
        this.setState({
            [vName]:vValue
        })
    }
    render() {
        const {storesShow=[]}=this.props;
        const datas=storesShow;
        console.log(datas)
        const {authBrandList=[]}=datas;
        const {concernModel,visible,visible1}=this.state;

        return (
          <div className={storeDetail}>
              <NavTopBar title='店铺详情' dispatch={this.props.dispatch} ></NavTopBar>
              <Flex className={sto_detail}>
                  <NoLazyImg className='sto_Logo' src={datas.logo==undefined?"":datas.logo}/>
                  <div className='sto_info'>
                      <div style={{marginBottom:".3rem"}}>{datas.name }</div>
                      <div style={{color:"#999"}}>{datas.collect}人关注</div>
                  </div>
                  <span className='sto_btn'
                        onClick={()=>{
                            this.props.dispatch({ type: 'storesShow/getattEFF',obj:{ id: datas.id, favType:2 }})
                                .then(res => this.props.dispatch({ type: 'storesShow/getstoresEFF', obj:{ id:this.props.match.params.id }})
                                )}} >{datas.isFav==1 ?'已关注':'关注'}</span>
              </Flex>

              {/*<Flex style={{backgroundColor:"#fff",margin:"0 auto",borderTop:"1px solid #e5e5e5",borderBottom:"1px solid #e5e5e5",padding:".2rem 0"}} className="header_list" justify="between">*/}
                  {/*<div>*/}
                      {/*<p>全部商品</p>*/}
                      {/*<p>{datas.goodsCount }</p>*/}
                  {/*</div>*/}
                  {/*<div style={{borderLeft:"1px solid #e5e5e5",borderRight:"1px solid #e5e5e5"}}>*/}
                      {/*<p>上新</p>*/}
                      {/*<p>{datas.newGoodsNum }</p>*/}
                  {/*</div>*/}
                  {/*<div style={{borderRight:"1px solid #e5e5e5"}}>*/}
                      {/*<p>优惠券</p>*/}
                      {/*<p>{datas.couponNum }</p>*/}
                  {/*</div>*/}
                  {/*<div>*/}
                      {/*<p>发现动态</p>*/}
                      {/*<p>{datas.dynamicNum }</p>*/}
                  {/*</div>*/}
              {/*</Flex>*/}
              {datas? <Flex className={sto_square}>
                  <span className='sto_service' >
                      <span style={{color:'#000'}}>商品评价</span>
                      <span style={{color:'#95AE6E'}}>{datas.evaluateStore.sevalDesccredit||0}分</span>
                      {/*<span style={{width:'28%',color:"#999"}}>{datas.desc }</span>*/}
                  </span>
                  <span className='sto_service' ><span style={{color:'#000'}}>服务评价</span><span style={{color:'#95AE6E'}}>{datas.evaluateStore.sevalServicecredit ||0}分</span><span style={{width:'28%',color:"#999"}}>{datas.service }</span></span>
                  <span className='sto_service' ><span style={{color:'#000'}}>物流速度</span><span style={{color:'#95AE6E'}}>{datas.evaluateStore.sevalDeliverycredit||0}分</span><span style={{width:'28%',color:"#999"}}>{datas.deli}</span></span>
              </Flex>:""}

              <Flex className={sto_list}>
                  <Flex justify="between">
                      <Flex style={{padding:"0"}}>
                          <h4>商家电话 </h4>
                          <span><a style={{color:"#333"}} style={{color:"#999"}} href={"tel:"+datas.tel}>{datas.tel}</a></span>
                      </Flex>
                      <a href={"tel:"+datas.tel} style={{color:"#333"}}><Icon size="xs" type={storeTel.id}/></a>
                  </Flex>
                  <Flex justify="between">
                      <h4>店铺二维码</h4>
                      {/*onClick={this.erweima(datas.code)}*/}
                      <NoLazyImg style={{width:".6rem",height:".6rem"}} onClick={()=>{
                          this.setState({
                              visible:true
                          })
                      }} src={datas.code==undefined?"":datas.code}/>
                  </Flex>
              </Flex>
              <Flex className={sto_list}>
                  <Flex >
                      <h4>店铺介绍</h4>
                      <span style={{color:"#999"}}>{datas.description }</span>
                  </Flex>
                  <Flex ><h4 >开店时间</h4><span style={{color:"#999"}}>{datas.storeTimeStr}</span></Flex>
                  <Flex ><h4>所在地址</h4><span style={{color:"#999"}}>{datas.areaInfo}</span></Flex>
                  <Flex justify="between"><h4>营业执照</h4><span></span><NoLazyImg style={{width:"60px"}} onClick={()=>{
                      this.setState({
                          visible1:true
                      })
                  }} src={datas.image1 ==undefined?"":datas.image1 }/></Flex>
              </Flex>
              <Flex className={sto_lists}>
                  <div style={{paddingTop:".3rem",paddingBottom:".3rem"}}>
                      <h4>授权品牌</h4>
                        <Flex justify="start" wrap="wrap">
                            {authBrandList.map((v,i)=>{
                                return <NoLazyImg key={i} style={{width:".9rem",margin:"0 .1rem .1rem 0"}} src={v.brandPic  ==undefined?"":v.brandPic  }></NoLazyImg>
                            }) }

                        </Flex>
                  </div>
              </Flex>
              <Modal
                  popup
                  visible={concernModel}
                  onClose={()=>{ this.handlePayModel("concernModel", false) }}
                  animationType="slide-up"
              >
                  <div>
                      <List>
                          <Button type='primary' onClick={() =>{ this.setState({ concernModel:false }, () => {this.props.dispatch({ type: 'storesShow/getattEFF',obj:{ id: datas.id, favType:2 }}).then(res => this.props.dispatch({ type: 'storesShow/getstoresEFF', obj:{ id:this.props.match.params.id }}) )}) }}>{datas.isFav==1 ?'取消关注':'确定关注'}</Button>
                          <Button type='ghost' onClick={()=>{ this.handlePayModel("concernModel", false) }}>取消</Button>
                      </List>
                  </div>
              </Modal>
              <Modal
                  visible={visible}
                  transparent
                  // maskClosable={false}
                  // className={evalute_madel}
                  onClose={()=>{this.setState({visible:false})}}
                  //title="Title"
                  // footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                  // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
              >
                  <div style={{ height:"100%" }}>
                      <NoLazyImg style={{width:"100%"}} src={datas.code==undefined?"":datas.code}/>
                  </div>

              </Modal>
              <Modal
                  visible={visible1}
                  transparent
                  // maskClosable={false}
                  // className={evalute_madel}
                  onClose={()=>{this.setState({visible1:false})}}
                  //title="Title"
                  // footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                  // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
              >
                  <div style={{ height:"100%" }}>
                      <NoLazyImg style={{width:"100%"}} src={datas.image1==undefined?"":datas.image1}/>
                  </div>

              </Modal>
          </div>
        )
    }
}
export default connect(({ storesShow }) => ({ storesShow }))(StoresDetail);
